<template>
  <div class="indexmap">
    <div id="mapbox"></div>
    <tool-menu-bar></tool-menu-bar>
    <el-container class="mainBox" v-show="!isHidde">
      
      <el-tabs class="checkTabs" tab-position="left" v-model="activeMaincheck">
        <el-tab-pane label="综合监管" name="syn">
          <el-row class="topRow">
            <span class="tit">综合监管</span>
          </el-row>
          <el-row class="txtContent" v-for="(item, index) in supervisingList" :key="index">
            <div class="txtItems">
              <span class="txtTitle">测绘单位：{{item.companyName}}</span>
              <span>测绘人员：{{item.companyName}}</span>
              <span>测绘时间：{{item.time}}</span>
              <span>测绘地点：{{item.place}}</span>
              <span>位置：{{item.coorDonate}}</span>
            </div>
            <div class="toolBtn">
              <a href="javascript:void(0)">查看</a>
            </div>
          </el-row>
          <el-pagination
            :current-page.sync="supervisingData.page"
            :page-size="supervisingData.size"
            @current-change="getSupervisingList"
            layout="prev, pager, next, jumper"
            :total="supervisingPageTotal"
            style="margin-top:20px"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane class="ideaTabs" label="审查意见" name="rep">
          <el-tabs tab-position="top" v-model="ideaTabs">
            <el-tab-pane label="内业审查意见" name="nyscyj">
              <el-row class="txtContent">
                <div class="txtItems">
                  <span class="changeTime">{{getDate}}</span>
                  <div class="subItem">
                    <span>测绘人员：张小明</span>
                    <span>问题类型：一般错误</span>
                  </div>
                  <span>问题位置：坐标X 107.45；坐标Y 302.09</span>
                  <span>问题描述：部分内容缺失</span>
                  <div class="changeStatus">
                    <span>修改情况：</span>
                    <span>待修改</span>
                  </div>
                </div>
                <div class="toolBtn">
                  <span class="eidtState" @click="showEditBox">修改情况</span>
                  <a class="del" href="javascript:void(0)">删除</a>
                  <div class="eidtStateBox" v-show="eidtState">
                    <el-checkbox>已修改</el-checkbox>
                    <el-checkbox>未修改</el-checkbox>
                  </div>
                </div>
              </el-row>

              <!-- 添加复审内业审查意见 -->
              <el-form class="formFsnysc" v-model="formNyscyj" v-if="nyscyjAdd">
                <div class="pblLayItem">
                  <el-form-item label="问题图层">
                    <el-select v-model="formNyscyj.pblLay">
                      <el-option label="项目红线" value="项目红线"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="问题类型">
                    <el-select v-model="formNyscyj.pblType">
                      <el-option label="一般错误" value="一般错误"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <el-form-item label="问题位置" inline-message>
                  <div class="pblLayItem">
                    <div class="group">
                      <span class="posLab">坐标x</span>
                      <el-input v-model="formNyscyj.pblPos.x" class="pos"></el-input>
                    </div>
                    <div class="group">
                      <span class="posLab">坐标y</span>
                      <el-input v-model="formNyscyj.pblPos.y" class="pos"></el-input>
                    </div>
                    <el-button class="position el-icon-delete-location" @click="handlePickup">拾取</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="问题描述">
                  <el-input class="txtArea" type="textarea" rows="7"></el-input>
                </el-form-item>
                <div class="btns">
                  <el-button class="submit" @click="handleAddFsnysc">提交</el-button>
                  <el-button class="cancel" @click="nyscyjAdd = false">取消</el-button>
                </div>
              </el-form>
            </el-tab-pane>

            <el-tab-pane class="wy" label="外业核查意见" name="wyhcyj">
              <el-row class="txtContent" v-for="item in 2" :key="item">
                <div class="txtItems">
                  <span class="changeTime">{{getDate}}</span>
                  <span>核查图层：2000现状图</span>
                  <span>核查描述：核查此处是否大于25°</span>
                  <span>举证情况：待通过</span>
                </div>
                <div class="toolBtn">
                  <span class="eidtState" @click="showEditBox">修改情况</span>
                  <a class="del" href="javascript:void(0)">删除</a>
                  <div class="eidtStateBox" v-show="eidtState">
                    <el-checkbox>已修改</el-checkbox>
                    <el-checkbox>未修改</el-checkbox>
                  </div>
                </div>
              </el-row>

              <!-- 添加复审外业核查意见 -->
              <el-form class="formFswyhc" v-model="formWyhcyj" v-if="wyhcyjAdd">
                <div class="pblLayItem">
                  <el-form-item label="核查图层">
                    <el-select v-model="formWyhcyj.pblLay">
                      <el-option label="2000现状图" value="2000现状图"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <el-form-item label="问题描述">
                  <el-input class="txtArea" type="textarea" rows="7"></el-input>
                </el-form-item>
                <div class="btns">
                  <el-button class="submit" @click="handleAddFswyhc">提交</el-button>
                  <el-button class="cancel" @click="wyhcyjAdd = false">取消</el-button>
                </div>
              </el-form>
            </el-tab-pane>
          </el-tabs>
          <el-button @click="handleAdd" :disabled="addBtnState" class="blue">新增</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-container>
  </div>
</template>

<script>
import toolMenuBar from "@/components/toolMenuBar/";
import { getSupervisingList } from "@/api/projectManage/feasiblePlan/mapView.js";
export default {
  components: {
    toolMenuBar
  },
  data() {
    return {
      eidtState: false,
      isHidde: false,
      ideaTabs: "nyscyj",
      activeMaincheck: "syn",
      nyscyjAdd: false,
      wyhcyjAdd: false,
      formNyscyj: {
        pblLay: "",
        pblType: "",
        pblPos: {
          x: "",
          y: ""
        },
        pblDesc: ""
      },
      formWyhcyj: {
        cheLay: "",
        pblDesc: ""
      },
      supervisingData: {
        page: 1,
        size: 2,
        projectId: 1
      },
      supervisingPageTotal: 0,
      supervisingList: []
    };
  },
  computed: {
    addBtnState() {
      if (
        (this.ideaTabs === "nyscyj" && this.nyscyjAdd) ||
        (this.ideaTabs === "wyhcyj" && this.wyhcyjAdd)
      ) {
        return true;
      } else {
        return false;
      }
    },
    getDate() {
      const date = new Date();
      return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDay();
    }
  },
  created() {
    this.getSupervisingList()
  },
  methods: {
    handleClose() {
      this.isHidde = !this.isHidde;
    },
    handleAdd() {
      switch (this.ideaTabs) {
        case "nyscyj":
          this.nyscyjAdd = true;
          break;
        case "wyhcyj":
          this.wyhcyjAdd = true;
          break;
        default:
          break;
      }
    },
    showEditBox() {
      this.eidtState = !this.eidtState;
    },
    /*
     * 提交添加复审内业审查意见
     * */
    handleAddFsnysc() {
      this.nyscyjAdd = false;
    },
    /*
     * 提交添加复审外业核查意见
     * */
    handleAddFswyhc() {
      this.wyhcyjAdd = false;
    },
    /*
     * 拾取坐标
     * */
    handlePickup() {
      console.log("拾取坐标");
    },
    getSupervisingList() {
      //获取综合监管列表
      getSupervisingList(this.supervisingData).then(res => {
        this.supervisingList = res.data.rows
        this.supervisingPageTotal = res.data.total
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.indexmap {
  .menubox {
    width: 40px;
    height: 390px;
    background: #ffffff;
    border-radius: 2px;
    left: 40px;
    top: 40px;
    position: absolute;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 48px;
      cursor: pointer;
      img {
        width: 24px;
        height: 24px;
      }
    }
    .line {
      width: 18px;
      height: 1px;
      margin: auto;
      background: #e6e6e6;
    }
  }
}

// 主container
.main-box {
  
  /deep/ .el-tabs__header {
    margin: 0;
  }
  /deep/ .checkTabs.el-tabs {
    display: flex;
    & > .el-tabs__header {
      width: 88px;
      height: 656px;
      background: rgba(247, 248, 250, 1);
      opacity: 1;
      padding: 30px 0;
      margin-right: 0;
      border-radius: 4px 0px 0px 4px;
      box-sizing: border-box;
      /deep/ .el-tabs__nav {
        /deep/ .el-tabs__item,
        /deep/ .el-tabs__active-bar {
          height: 36px;
          line-height: 36px;
          font-size: 14px;
        }
      }

      /deep/ .el-tabs__item.is-active {
        background: #ebeff5;
      }
      /deep/ .el-tabs__nav-wrap::after {
        background: none;
      }
    }
    /deep/ .txtContent.el-row {
      margin-left: 20px;
    }
  }
  .topRow {
    border-bottom: 1px solid #f2f2f2;
    padding-left: 30px;
  }
  .checkTabs {
    & > .el-tabs__content {
      width: 672px;
      background: #fff;
      padding: 30px 0;
      box-sizing: border-box;
      .tit {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        height: 36px;
        line-height: 36px;
        color: rgba(29, 136, 243, 1);
        opacity: 1;
        display: inline-block;
        margin-bottom: 10px;
        border-bottom: 2px solid #1570d5;
      }
    }
  }
}

// 综合监管列表
.txtContent {
  display: flex;
  width: calc(100% - 20px);
  height: 120px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(225, 226, 230, 1);
  .txtItems {
    width: calc(100% - 60px);
    padding-left: 10px;
    & > span {
      font-size: 14px;
      font-family: PingFang SC;
      margin-top: 10px;
      font-weight: 500;
      line-height: 20px;
      color: rgba(140, 140, 140, 1);
      opacity: 1;
      display: inline-block;
      width: 240px;
    }
    .txtTitle {
      display: block;
    }
  }
  .toolBtn {
    position: relative;
    width: 120px;
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 30px;
    .eidtState {
      font-size: 14px;
      color: #7eb1e6;
      line-height: 20px;
      margin-right: 10px;
      cursor: pointer;
    }
    a {
      width: 30px;
      line-height: 20px;
      font-size: 14px;
      color: rgba(29, 136, 243, 1);
      &.del {
        color: #f92828;
      }
    }
    .eidtStateBox {
      position: absolute;
      width: 176px;
      height: 60px;
      bottom: -3px;
      right: 70px;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.08);
      display: flex;
      align-items: center;
      padding: 0 20px;
      /deep/ .el-checkbox {
        margin-right: 6px;
      }
    }
  }
}

// 审查意见
.ideaTabs {
  height: 100%;
  /deep/ .el-tabs {
    height: 100%;
  }
  /deep/ .el-tabs__nav-scroll {
    padding-bottom: 10px;
    padding-left: 30px;
    border-bottom: 1px solid #f2f2f2;
  }
  /deep/ .el-tabs__item {
    height: 36px;
    font-size: 14px;
    line-height: 36px;
    color: #999999;
    padding: 0 10px;
    &.is-active {
      color: #1d88f3;
    }
  }
  /deep/ .el-tabs__nav-wrap::after {
    background: none;
  }

  // 添加按钮
  .blue {
    background: #409eff;
    font-size: 14px;
    color: #fff;
    position: absolute;
    top: 34px;
    right: 30px;
    width: 60px;
    height: 28px;
    padding: 0;
    &.is-disabled {
      background: #f0f3f5;
      color: #b3b3b3;
    }
  }
  /deep/ .el-tabs__content {
    padding: 0;
    height: calc(100% - 47px);
    box-sizing: border-box;
  }
  /deep/ .el-row {
    height: 150px;
  }
  .wy {
    /deep/ .el-row {
      height: 120px;
    }
  }
  // 复核内业审查意见列表
  .txtItems {
    display: flex;
    flex-direction: column;
    .subItem {
      display: flex;
      & > span {
        font-size: 14px;
        font-family: PingFang SC;
        margin-top: 10px;
        font-weight: 500;
        line-height: 20px;
        color: rgba(140, 140, 140, 1);
        width: 200px;
      }
    }
    & > span {
      display: inline-block;
      width: 100%;
      &.cols2 {
        width: 200px;
      }
    }
    .changeTime {
      position: absolute;
      top: 10px;
      right: 30px;
      width: auto;
    }
    .changeStatus {
      display: flex;
      font-size: 14px;
      font-family: PingFang SC;
      margin-top: 10px;
      font-weight: 500;
      line-height: 20px;
      color: rgba(140, 140, 140, 1);
      & > span {
        display: inline;
        // width: auto;
      }
    }
  }

  // 添加复审内业审查意见
  .formFsnysc,
  .formFswyhc {
    .posLab {
      font-size: 13px;
      color: #a6a6a6;
      margin-right: 7px;
    }
    .pblLayItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      /deep/ .el-form-item {
        display: flex;
      }
      .group {
        display: inline;
      }
    }
    /deep/ .el-form-item__label {
      font-size: 14px;
      font-weight: 500;
      color: #8c8c8c;
    }
    .position {
      height: 36px;
      color: #409eff;
      background: #f0f5fa;
      padding: 8px;
    }
    /deep/ .el-input {
      width: 180px;
      height: 36px;
      font-size: 14px;
      color: #666;
      /deep/ .el-input__inner {
        height: 36px;
      }
      &.pos {
        width: 160px;
      }
    }
    .txtArea {
      width: 488px;
      height: 160px;
    }
    .btns {
      margin-left: 70px;
      btn {
        font-size: 14px;
        color: #666666;
      }
      .submit {
        background: #409eff;
        color: #fff;
      }
    }
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding-right: 96px;
    margin: 20px 0 0 20px;
  }
  // 复审外业核查意见
  .fswyhc {
    .txtContent {
      height: 120px;
    }
  }
}
</style>
